<admintpl file="header" />
<link rel="stylesheet" type="text/css" href="__PUBLIC__/hui/Hui.css" />
<style type="text/css">
    body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    #div1{ padding:1%; margin:1%;}
</style>
</head>

<body>
    <div class="H-flexbox-horizontal" style="background-color:white;">
        	<div class="H-flex-item H-flexbox-vertical H-margin-vertical-both-10">
                        <div class="H-flex-item H-font-size-16  H-center-all H-padding-vertical-bottom-2 " style="color:red;">
        			{$order_map['distance_type']}
        		</div>
        		<div class="H-flex-item H-font-size-14 H-center-all">
        			订单状态
        		</div>
        	</div>
        	<div class="H-flex-item H-flexbox-vertical H-margin-vertical-both-10 H-border-horizontal-left-after">
        		<div class="H-flex-item H-font-size-16 H-center-all H-padding-vertical-bottom-2 " style="color:red;">
        			<?php  echo empty($order_map['distance'])? '0':$order_map['distance']; ?>
        		</div>
        		<div class="H-flex-item H-font-size-14 H-center-all">
        			距离(公里)
        		</div>
        	</div>
        	<div class="H-flex-item H-flexbox-vertical H-margin-vertical-both-10 H-border-horizontal-left-after">
        		<div class="H-flex-item H-font-size-16 H-center-all H-padding-vertical-bottom-2 " style="color:red;">
        			<?php  echo empty($order_map['duration'])? '0':$order_map['duration']; ?>
        		</div>
        		<div class="H-flex-item H-font-size-14 H-center-all">
        			所需时间(<?php  echo empty($order_map['time'])?"分钟":$order_map['time']; ?>)
        		</div>
        	</div>
        </div>
    <!--
    <div id="div1">
        <table boder="0" width="50%" height="10%" align="center">
            <tr >
                <td align="center" width="16%"><div style="height:100%;width:100%;text-align:center;font-size:20px;border:none;color:red;">{$order_map['distance_type']}</div></td>
                <td align="center" width="16%"><div style="height:100%;width:100%;text-align:center;font-size:20px;border:none;color:red;"><?php  echo empty($order_map['distance'])? '0':$order_map['distance']; ?></div></td>
                <td align="center" width="16%"><div style="height:100%;width:100%;text-align:center;font-size:20px;border:none;color:red;"><?php  echo empty($order_map['duration'])? '0':$order_map['duration']; ?></div></td>
                </tr>
            </tr>
            <tr>
              <td align="center">订单状态</td>    
              <td align="center">距离(公里)</td>        
              <td align="center">所需时间(<?php  echo empty($order_map['time'])?"分钟":$order_map['time']; ?>)</td>
            </tr>
        </table>

    </div>
    -->
<div id="allmap">

</div>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=OkM4ci06ibVrimvizgsIWv0sjASIa7BK&s=1"></script>
<script type="text/javascript">
    //加载框
    var index = layer.load(2, {
        shade: [0.1,'#000000'] //0.1透明度的白色背景
    });
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    var order_type = parseInt({$order_map.order_type});
    var allOverlay =  map.getOverlays();
    pnlocation();
    /**
     * 跑客位置
     */
    function pnlocation() {
        var allOverlay = map.getOverlays();
        if( allOverlay != null )
            map.clearOverlays();
        //地图中心点
        var lng = {$order_map.send_longit};
        var lat = {$order_map.send_latit};
        if(order_type==3){
            lng = {$order_map.reci_longit};
            lat = {$order_map.reci_latit};
        }
        var point = new BMap.Point(lng,lat);//起点（发单地经纬度）
        map.centerAndZoom(point, 14);
        map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
        map.enableContinuousZoom();//启用连续缩放效果

            switch (order_type){
                        //1取送东西
                case 1:
                    console.log("1取送东西");
                        //创建起点
                        var pt = new BMap.Point({$order_map.send_longit}, {$order_map.send_latit});
                        var myIcon = new BMap.Icon("__PUBLIC__/images/send.png", new BMap.Size(20,30));
                        var marker1 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
                        map.addOverlay(marker1);              // 将标注添加到地图中
                        //终点
                        var pte = new BMap.Point({$order_map.reci_longit}, {$order_map.reci_latit});
                        var myIcone = new BMap.Icon("__PUBLIC__/images/get.png", new BMap.Size(20,30));
                        var markere2 = new BMap.Marker(pte,{icon:myIcone});  // 创建标注
                        map.addOverlay(markere2);              // 将标注添加到地图中


                        var walking = new BMap.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}, onPolylinesSet:function(routes) {
                            searchRoute = routes[0].getPolyline();//导航路线
                            map.addOverlay(searchRoute);
                        },
                            onMarkersSet:function(routes) {
                                map.removeOverlay(routes[0].marker); //删除起点
                                map.removeOverlay(routes[1].marker);//删除终点
                            }});
                        walking.search(pt, pte);


//                        var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true},
//                                                                    onPolylinesSet:function(routes) {
//                                                                        searchRoute = routes[0].getPolyline();//导航路线
//                                                                        map.addOverlay(searchRoute);
//                                                                    },
//                                                                    onMarkersSet:function(routes) {
//                                                                        console.log(routes[0].marker);
//                                                                        map.removeOverlay(routes[0].marker); //删除起点
//                                                                        map.removeOverlay(routes[1].marker);//删除终点
//                                                                }});
//                        driving.search(pt, pte,BMAP_DRIVING_POLICY_LEAST_DISTANCE);
                        break;
                //2代买
            case 2:
                //创建起点
                var pt = new BMap.Point({$order_map.send_longit}, {$order_map.send_latit});
                var myIcon = new BMap.Icon("__PUBLIC__/images/order/order_mai.png", new BMap.Size(20,30));
                var marker1 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
                map.addOverlay(marker1);              // 将标注添加到地图中
                //终点
                var pte = new BMap.Point({$order_map.reci_longit}, {$order_map.reci_latit});
                var myIcone = new BMap.Icon("__PUBLIC__/images/order/order_shou.png", new BMap.Size(20,30));
                var markere2 = new BMap.Marker(pte,{icon:myIcone});  // 创建标注
                map.addOverlay(markere2);              // 将标注添加到地图中
                var walking = new BMap.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}, onPolylinesSet:function(routes) {
                    searchRoute = routes[0].getPolyline();//导航路线
                    map.addOverlay(searchRoute);
                },
                    onMarkersSet:function(routes) {
                        map.removeOverlay(routes[0].marker); //删除起点
                        map.removeOverlay(routes[1].marker);//删除终点
                    }});
                walking.search(pt, pte);
                break;
                //3排队
            case 3:
                //创建排队点
                var pt = new BMap.Point({$order_map.reci_longit}, {$order_map.reci_latit});
                var myIcon = new BMap.Icon("__PUBLIC__/images/order/order_pai.png", new BMap.Size(20,30));
                var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
                map.addOverlay(marker2);              // 将标注添加到地图中

                break;

        }
        var status = parseInt({$order_map.status});
        if(status != 7 && status != 9 ){
            //跑客的位置
            $.ajax({
                type: "GET",
                async: true,
                url: "{:U('getpnposition',array('dispatch_id'=>$order_map[dispatch_id]))}",
                dataType: "json",
                success: function(data) {
                    console.log(data);
                    var pnpoint = new BMap.Point(data.longitude, data.latitude);
                    var pkIcon = new BMap.Icon("__PUBLIC__/images/pn.png", new BMap.Size(35,45));

                    var content = data['dispatch_name']+","+data['mobile']+"</br>位置时间："+data['place_up_time'];
                    var marker = new BMap.Marker(pnpoint, {icon: pkIcon});
                    marker.setTop(true);
                    map.addOverlay(marker);

                    var geoc = new BMap.Geocoder();
                    geoc.getLocation(pnpoint, function(rs){
                        var addComp = rs.addressComponents;
                        var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
                        marker.setLabel(new BMap.Label(address,{offset:new BMap.Size(30,-8)}));
                    });
                }
            });
        }


        // 添加缩放控件
//        var navigationControl = new BMap.NavigationControl({
//            // 靠左上角位置
//            anchor: BMAP_ANCHOR_TOP_LEFT,
//            // 只包含缩放按钮
//            type: BMAP_NAVIGATION_CONTROL_ZOOM,
//            // 启用显示定位
//            enableGeolocation: true
//        });
//        map.addControl(navigationControl);

//        // 添加定位控件
//        var geolocationControl = new BMap.GeolocationControl();
//
//        geolocationControl.addEventListener("locationSuccess", function(e){
//            // 定位成功事件
//            var address = '';
//            address += e.addressComponent.province;
//            address += e.addressComponent.city;
//            address += e.addressComponent.district;
//            address += e.addressComponent.street;
//            address += e.addressComponent.streetNumber;
////                    alert("当前定位地址为：" + address);
//
//            map.centerAndZoom(point, 14);
//        });
//
//        geolocationControl.addEventListener("locationError",function(e){
//            // 定位失败事件
//            //alert(e.message);
//        });
//        map.addControl(geolocationControl);

        setTimeout("pnlocation()",120000);
    }
    map.addEventListener("tilesloaded",function(){
        layer.close(index);
    });

</script>
</body>
</html>